<template>
    <div class='box'>
         <div class="box1">
             <div class="box2"><h3>电商后台管理系统</h3></div>
             <div class="box4"> <i class="el-icon-user-solid"></i><input  class="inp1" type="text" v-model="value1"></div>
             <div class="box5"><i class="el-icon-eleme"></i><input type="password" v-model="value2" class="inp2"></div>
             
             <div class="box3">
                 <el-button type="primary" @click="login">登录</el-button>
                  <el-button type="info">重置</el-button>
             </div>
         </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
    //   name: [{ names: "admin", password: 123456 }]
    name:"admin",
    password:123456,
    };
  },
  mounted() {
    // localStorage.setItem("list", JSON.stringify(this.name));
  },
  methods: {
    login() {
        // let arr = JSON.parse(localStorage.getItem('list'))
        // console.log(this.password);
        // console.log(this.value1);
        if(this.value1==this.name && this.value2==this.password){
            // console.log(1);
            // this.
            this.$router.push({path:"/list"})
        }else{
            alert("用户名或密码输入错误")
        }
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 1000px;
  background-color: #2c4c6a;
  // position: relative;
  .box1 {
    // margin-top: 200px;
    // position: absolute;
    top: 200px;
    width: 300px;
    height: 250px;
    border: 1px solid #ccc;
    margin: auto;
    text-align: center;
    background-color: #fff;
    input {
      margin-top: 20px;
    }
    button {
      margin-top: 20px;
    }
  }

}
</style>
